<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="top">
			<view class="dingwei"></view>
			<text>定位：{{CityName}}</text>
		</view>
		<view class="wanl-goods-comment">
			<wanl-empty text="没有找到任何记录" v-if="listData.length === 0 && status !== 'loading'"></wanl-empty>
			<view class="list radius-bock">
				<view class="item" v-for="item in listData" :key="item.id" @tap="goYuncang(item.id,item.distance.toFixed(2))">
					<view class="img">
						<image :src="'https://dcdn.cxycoder.com'+item.images[0]" mode="aspectFill"></image>
					</view>
					<view class="juli">
						<view class="title">{{item.name}}</view>
						<view class="distance">距离 {{item.distance.toFixed(2)}}km</view>
					</view>
					<view class="oper">
						<view class="qulianxi btn" @tap.stop="callPhone(item.mobile)">
							<view class="icon"></view>
							<text>去联系</text>
						</view>
						<view class="daohang btn" @tap.stop="daohang(item.lat,item.lng)">
							<view class="icon"></view>
							<text>导航</text>
						</view>
					</view>
				</view>
				
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
		<map id="map" hidden="true"></map>
	</view>
</template>

<script>
import Map from '@/js_sdk/fx-openMap/openMap.js'
const md5 = require('js-md5');
import { mapState } from 'vuex';
export default {
	computed: { ...mapState(['user']) },
	data() {
		return {
			CityName:'',
			listData: [], //列表
			reload: false, //判断是否上拉
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			lat:0,
			lng:0,
		};
	},
	onShow() {
		this.getCityName()
	},
	onLoad() {
		// this.loadData();
		this.getLocationAuth()
	
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		daohang(lat,lng){
			//既有起点也有终点
			var options = {
			    origin:{  //导航起点坐标和名称,如果不传则起点为当前位置
			        latitude:this.lat,
			        longitude:this.lng,
			        name:"起点名称"
			    },
			    destination:{  //导航终点点坐标和名称
			        latitude:lat,
			        longitude:lng,
			        name:"终点名称"
			    },
			    mode:"drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			    mapId:"map" //map 组件的 id (微信小程序端必传)
			}
			//只有有终点(起点默认为当前位置) 微信小程序使用方式
			// var options = {
			//     destination:{  //导航终点点坐标和名称
			//         latitude:lat,
			//         longitude:lng,
			//         name:"终点名称"
			//     },
			//     mode:"drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			//     mapId:"map" //map 组件的 id (微信小程序端必传)
			// }
			Map.routePlan(options,'gcj02')
		},
		callPhone(phoneNumber) {
		    // 判断手机号是否为空
		    if (phoneNumber) {
		        // 调用拨号接口
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function () {
						console.log('拨号成功');
					},
					fail: function (err) {
						console.log('拨号失败：', err);
					}
		        });
		    } else {
		        uni.showToast({
					title: '电话号码不能为空',
					icon: 'none'
		        });
		    }
		},
		goYuncang(id,distance){
			uni.navigateTo({
				url: '/pages/user/yuncang/detail?id='+id+'&distance='+distance
			})
		},
		get_Location() {
			uni.navigateTo({
				url: '/pages/user/yuncang/location'
			})
		},
		//获得城市缓存
		getCityName() {
			
			let _that = this;
			setTimeout(function() {
				uni.getStorage({
					key: 'City_Name',
					success(res) {
						_that.CityName = res.data
					}
				})
			}, 500)
		},
		async getCity(lat,lng){
			console.log('getCity')
			let key = 'VQ3BZ-4D66N-KKWFZ-SYI42-V2DS6-4AFEO';
			let sk = 'hOqZ4pjMJsLUc0jwj7OwmvcT0PrNDOk0';
			//申请地址：https://lbs.qq.com/dev/console/application/mine
			let sig = md5("/ws/geocoder/v1?key="+key+"&location="+lat+","+lng+sk)
			await uni.request({
				url: 'https://apis.map.qq.com/ws/geocoder/v1?location=' + lat + ',' + lng +
					'&key=' + key +
					'&sig=' + sig,
				method: "GET",
				success(ress) {
					console.log('success')
					let data = ress.data; //获取到所有定位的数据
					let CityName = ress.data.result.address_component.city;
					uni.setStorage({
						key: 'City_Name',
						data: CityName
					})
				},
				fail() {
					console.log('fail')
					uni.showToast({
						'title': '对不起，数据获取失败！2',
						'icon': 'none'
					})
				}
			})
			
		},
		//获取定位
		getLocationAuth() {
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success(res) {
					console.log("位置信息", res);
					that.lat = res.latitude;
					that.lng = res.longitude;
					that.loadData();
		
					that.getCity(res.latitude,res.longitude);
				},
				fail(res) {
					that.loadData();
					uni.showToast({
						'title': '对不起，获取位置失败！',
						'icon': 'none'
					})
				}
			})
		},
		async loadData() {
			await uni.request({
				url: '/wanlshop/Warehouse/list?lat='+this.lat+'&lng='+this.lng,
				method: 'GET',
				success: res => {
					uni.stopPullDownRefresh();
					this.listData = this.reload ? res.data.data : this.listData.concat(res.data.data); //评论数据 追加
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore':'more';
				}
			});
		},
		//预览图片
		previewImage(image, index) {
			var imgArr = [];
			for (var item of image) {
				imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
			}
			uni.previewImage({
				urls: imgArr,
				current: imgArr[index],
				indicator: 'number'
			});
		}
	}
};
</script>

<style lang="scss">
	.top{
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		text{
			margin-left: 10rpx;
		}
		.dingwei{
			width: 32rpx;
			height: 32rpx;
			background: url(https://dcdn.cxycoder.com/user/dingwei.png);
			background-repeat: no-repeat;
			background-size: 100%;
		}
	}
	.list{
		padding: 25rpx;
		background: none !important;
		.item{
			// width: 686rpx;
			height: 490rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: white;
			margin-bottom: 10rpx;
			.oper{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				.btn{
					width: 308rpx;
					height: 80rpx;
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.icon{
						width: 36rpx;
						height: 36rpx;
					}
				}
				.qulianxi{
					background: #F8F8FA;
					color: #2D2D2D;
					.icon{
						background: url(https://dcdn.cxycoder.com/user/lianxi.png);
						background-repeat: no-repeat;
						background-size: 100%;
					}
				}
				.daohang{
					background: #EAF2FF;
					color: #0499FD;
					.icon{
						background: url(https://dcdn.cxycoder.com/user/daohang.png);
						background-repeat: no-repeat;
						background-size: 100%;
					}
				}
			}
			.img{
				// width: 636rpx;
				height: 274rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
			}
			.juli{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:20rpx;
				.title{
					font-weight: 600;
					font-size: 32rpx;
				}
				.distance{
					font-weight: 400;
					font-size: 24rpx;
					color: #424242;
				}
			}
		}
		
	}
	
</style>
